SUMMARY: This project was about HTML and CSS. I used Adobe XD and Adobe Illustrator to create flashcards to learn vocabulary for HTML and CSS. I first researched flashcard designs and then created a low-wire frame design. Then I created a Med-Fi wire frame out the layout of the flashcards. I then created a navigation map to show how my flashcards interacted. Finally, I created a prototype and used it for user testing. This user testing helped me fix any issues with my flashcards.
GOALS: I’ve been wanting to grow my knowledge of Adobe XD. I wanted to learn how to make my work interactive. I was curious about how to make buttons and make my work scroll.
LOW-FI WIREFRAME: When researching I enjoyed the cards with bold colors. I know in my personal experience your color helps me memorize and learn the material better. I also wanted to play with the layout and spacing of the letters HTML and CSS. I wanted them to be fun and have different heights and widths. I wanted ultimately to make colorful and bold flashcards to make the experience of studying more enjoyable.
MED-FI WIREFRAME AND DESIGN:I came up with a design system and layout for my flashcards. The layout was one of the ten concepts that I created from my Low-Fi wireframe. I felt that it fit my intentions the most for this project. It’s fun and bold and would make studying more enjoyable. The design system consisted of icons which were arrows to direct you through the flashcards. I chose different shades of greens and purples. I wanted the font to be a darker shade of green and the background to be a lighter green. These colors change and I use shades of pink and blue. The font starts at a serif font and then I decided to change it to a san serif.
FINAL DESIGN: My final has changed a lot from the original low-fi wireframe. However, I’m super happy with it, and seeing the progress makes me proud with the progress it had. I started with a serif font. When expressing my ideas it felt like something was messing and I think the change this project needed the most was the change from a serif to a san serif. I wanted the words to overlap and feel big and bold. The serif wasn’t bold enough and didn’t take up the space how I wanted it to. I needed a more condensed and san serif. I then changed the background and added the overlapping of words and letters to achieve the look I was going for. Finally, I changed the arrows I made to smaller and simpler because the background was very busy.
NAVIGATION MAP: The navigation map consisted of how to move through the app. I wanted my app to have the option to scroll or tap. When getting on my app you start at the home page. From there you click an arrow that directs you to the index page. I have an index page because I wanted to split my flashcards into HTML and CSS. There is an arrow next to HTML and CSS to take you to those flashcards. After clicking on the arrow you are taken to your first card. You will see the term at the top. Once you are ready to move on you click the arrow or you have the option to scroll down and it takes you to an example and definition. At the bottom of the flashcard, it can take you either to the next card, the previous card, or to the index page.
APP PROTOTYPE BUILD:
For character styles, all of my headers were in the same font. The size of the headers was the same as well and were all left aligned. The body text was all in the same font and the same size. The components consisted of my icons which were my arrows. The arrows directed the user through the whole flashcards.
FINAL WORK: After user testing, I had a few comments about the size of the flashcards and needing arrows in certain spots to help the user understand where to go next. At first, I had all my flashcards go to the home screen instead of the index card. This makes the user have to take an extra unneeded step in my flashcards. I also added arrows next to HTML and CSS on my index page to show the user where to proceed.
https://xd.adobe.com/view/89be5d68-b3a4-4702-b162-e69f42fe32d0-dced/?fullscreen
KNOWLEDGE GAINED: I learned a lot about Adobe XD in this project. I was able to learn how to make components and how to make artboards flip, tap, and scroll. I was able to appreciate user testing and see how helpful it is to let people give feedback on the work before finalizing it. This project helped me further my knowledge of Adobe XD and made my work interactive.
